export class ConversationListView {
    constructor(container) {
        this.container = container;
        this.container.className = 'h-full flex flex-col bg-white border-r border-gray-200';
        this.conversations = new Map();
        this.initialize();
    }

    initialize() {
        // 创建新对话按钮区域
        const buttonContainer = document.createElement('div');
        buttonContainer.className = 'p-4 border-b border-gray-200';
        
        // 创建新对话按钮
        const newChatButton = document.createElement('button');
        newChatButton.className = 'w-full px-4 py-2.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 text-sm font-medium';
        newChatButton.innerHTML = `
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            新对话
        `;

        buttonContainer.appendChild(newChatButton);

        // 创建会话列表区域
        const listSection = document.createElement('div');
        listSection.className = 'flex-1 overflow-hidden flex flex-col';

        // 创建会话列表标题
        const listHeader = document.createElement('div');
        listHeader.className = 'p-4 text-xs font-medium text-gray-500 uppercase tracking-wider flex items-center gap-2';
        listHeader.innerHTML = `
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
            </svg>
            历史会话
        `;

        // 创建会话列表容器
        this.listContainer = document.createElement('div');
        this.listContainer.className = 'flex-1 overflow-y-auto px-2 space-y-0.5';

        // 组装组件
        listSection.appendChild(listHeader);
        listSection.appendChild(this.listContainer);

        this.container.appendChild(buttonContainer);
        this.container.appendChild(listSection);
    }

    addConversation(conversation) {
        const item = document.createElement('div');
        item.className = 'group flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors';
        item.dataset.id = conversation.id;

        const icon = document.createElement('div');
        icon.className = 'w-5 h-5 text-gray-500 flex-shrink-0';
        icon.innerHTML = `
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
            </svg>
        `;

        const title = document.createElement('div');
        title.className = 'flex-1 text-sm text-gray-700 truncate';
        title.textContent = conversation.title;

        const deleteButton = document.createElement('button');
        deleteButton.className = 'hidden group-hover:flex p-1 hover:bg-gray-200 rounded-md text-gray-400 hover:text-red-500 transition-colors';
        deleteButton.innerHTML = `
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
        `;

        item.appendChild(icon);
        item.appendChild(title);
        item.appendChild(deleteButton);
        
        this.listContainer.appendChild(item);
        this.conversations.set(conversation.id, item);
        
        return item;
    }

    setActiveConversation(conversationId) {
        this.conversations.forEach((item) => {
            if (item.dataset.id === conversationId) {
                item.classList.add('bg-gray-100');
                item.classList.add('font-medium');
            } else {
                item.classList.remove('bg-gray-100');
                item.classList.remove('font-medium');
            }
        });
    }

    onNewChat(callback) {
        this.container.querySelector('button').addEventListener('click', callback);
    }

    onSelectConversation(callback) {
        this.listContainer.addEventListener('click', (e) => {
            const item = e.target.closest('[data-id]');
            if (item) {
                const deleteButton = e.target.closest('button');
                if (!deleteButton) {
                    callback(item.dataset.id);
                }
            }
        });
    }

    onDeleteConversation(callback) {
        this.listContainer.addEventListener('click', (e) => {
            const deleteButton = e.target.closest('button');
            if (deleteButton) {
                const item = deleteButton.closest('[data-id]');
                if (item) {
                    callback(item.dataset.id);
                }
            }
        });
    }
}